document.addEventListener('DOMContentLoaded', function() {
    const navLinks = document.querySelectorAll('.profile-nav a');
    const sections = document.querySelectorAll('.profile-section');

    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            //排他事件
            navLinks.forEach(l => l.parentNode.classList.remove('active'));
            sections.forEach(s => s.classList.remove('active'));
            // 添加active类到当前点击的标签和对应的内容区  给profile-section
            this.parentNode.classList.add('active');
            const targetSection = document.querySelector(this.getAttribute('href'));
            targetSection.classList.add('active');
        });
    });

    // 头像上传功能
    //获取头像
    const editAvatarBtn = document.querySelector('.edit-avatar-btn');
    //创建input 标签
    const avatarInput = document.createElement('input');
    //创建文件输入框
    avatarInput.type = 'file';
    // 只能选择图片文件
    avatarInput.accept = 'image/*';
    //设置点击事件
    editAvatarBtn.addEventListener('click', () => {
        avatarInput.click();
    });




// 监听头像文件选择框的change事件
    avatarInput.addEventListener('change', function(e) {
    const file = e.target.files[0];  //获取用户选择的文件 以name属性名
//判断文件是不是能跳转
        if (file) {
            const reader = new FileReader(); // new FileReader();对象允许 Web 应用程序异步读取存储在用户计算机上的文件内容。
            reader.onload = function(event) {
                document.querySelector('img').src = event.target.result;
                const newAvatarUrl = event.target.result;
                const avatarChannel = new BroadcastChannel(10086);
                      avatarChannel.postMessage(file);
            };
            reader.readAsDataURL(file);

        }
    });

    // 表单提交
    const profileForm = document.querySelector('.profile-form');
    if (profileForm) {
        //提交事件
        profileForm.addEventListener('submit', function(e) {
            e.preventDefault();

            // 这里可以添加表单验证和提交逻辑
            const formData = {
                //获取值
                nickname: document.getElementById('nickname').value,
                gender: document.getElementById('gender').value,
                birthday: document.getElementById('birthday').value,
                bio: document.getElementById('bio').value
            };

            console.log('表单数据:', formData);

            alert('个人信息保存成功！');
        });
    }



    function loadUserData() {
        // 这里应该是AJAX请求获取用户数据
        // 模拟数据
        const userData = {
            username: '张三',
            userId: '123456',
            level: '黄金会员',
            avatar: '../../images/avatar.webp',
            nickname: '张三',
            gender: 'female',
            birthday: '1990-01-01',
            bio: '热爱生活，喜欢编程',
            phone: '138****1234',
            email: 'user***@example.com',
            lastPasswordChange: '2023-05-15'
        };

        // 更新页面数据
        document.querySelector('.username').textContent = userData.username;
        document.querySelector('.user-id').textContent = `ID: ${userData.userId}`;
        document.querySelector('.user-level').textContent = `会员等级: ${userData.level}`;
        document.querySelector('.avatar').src = userData.avatar;
        document.getElementById('nickname').value = userData.nickname;
        document.getElementById('gender').value = userData.gender;
        document.getElementById('birthday').value = userData.birthday;
        document.getElementById('bio').value = userData.bio;
    }

    // 页面加载时获取用户数据
    loadUserData();
});

